<template>
	<div class="toast-container">
		<div class="toast-message">{{ value }}</div>
	</div>
</template>

<script>
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'Toast',
		props: {
			value: {
				type: String,
				default: ''
			}
		}
	})
</script>

<style>
	.toast-message {
		font-size: 14px;
		padding: 10px 25px;
		text-align: center;
		color: #fff;
		border-radius: 6px;
		background-color: #323232
	}

	.toast-container {
		line-height: 17px;
		position: fixed;
		z-index: 1000;
		bottom: 50px;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
		opacity: 0;
	}
	
	.toast-container.active {
		opacity: 1
	}
	
</style>